<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <jsp:include page="commons/static.jsp" />
    <link type="text/css" rel="stylesheet" href="/static/css/userForm.css">
</head>
<body>

<jsp:include page="commons/header.jsp" />

<form class="userForm" action="/user/register" method="POST">

    <h4> 用户注册 </h4>

    <div>
        <label for="username">账户</label>
        <input id="username" type="text" name="username">
    </div>

    <div>
        <label for="password">密码</label>
        <input id="password" type="password" name="password">
    </div>

    <div>
        <label for="nickname">昵称</label>
        <input id="nickname" type="text" name="nickname">
    </div>

    <div>
        <button>注册</button>
    </div>


</form>

</body>
<script src="/static/lib/jquery.min.js"></script>
<script src="/static/lib/layer/layer.js"></script>
<script>
    $(function(){
        $("input[name='username']").blur(function (){
            let yhm=$(this).val();
            $.ajax({
                type:"GET",
                url:"/blog/user/check",
                data:{
                    action:"checkUsername",
                    username:yhm
                },
                dataType:"json",
                success:function (result){
                    let input=$("input[name='username']");
                    if (result.code!=0){
                        input.addClass("error");
                        input.focus();
                        layer.msg(result.message,function (){});
                    }else{
                        input.removeClass("error");
                    }
                }
            });
        });
        $("input[name='password']").blur(function (){
            if ($("input[name='username']").hasClass('error')){
                $("input[name='username']").focus();
            }else {
                let input=$("input[name='password']");
                let pw=$(this).val();
                $.ajax({
                    type:"GET",
                    url:"/blog/user/check",
                    data: {
                        action: "checkPassword",
                        password:pw
                    },
                    dataType: "json",
                    success:function (result){
                        if (result.code!=0){
                            input.addClass("error");
                            input.focus();
                            layer.msg(result.message,function (){})
                        }else {
                            input.removeClass("error");
                        }
                    }
                })
            }

        });

    });
</script>
</html>
